<template>
  <div class="guide">
    <div class="detail-wrapper">
      <!-- 左边区域，网站名称介绍-->
      <div class="detail-info">
        <h1>Academic Cloud Club</h1>
        <h2>Welcome to AC Club</h2>
      </div>
      <!-- 右边区域，网站介绍-->
      <div class="detail-banner">
        <el-carousel height="70vh" :interval="30000" class="right">
          <!-- 文章 -->
          <el-carousel-item>
            <el-card shadow="hover" body-style="" class="card">
              <div class="el-row">
                <div class="el-col-16">
                  <img
                    class="card-image"
                    src="../../assets/card1.png"
                    alt="hi"
                  />
                </div>
                <div class="el-col-8 card-intro">
                  <div class="card-title">
                    文章
                    <router-link to="/article">
                      <el-button color="#5194da" round plain class="btn"
                        >Explore</el-button
                      >
                    </router-link>
                  </div>
                  <div class="card-text">
                    分类查看文章，发表知识总结，分享您的思考
                  </div>
                  <el-button
                    type="primary"
                    round
                    style="
                      width: 150px;
                      display: flex;
                      margin-left: 50%;
                      transform: translate(-50%, 50px);
                    "
                    @click="login"
                    >Login</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-carousel-item>
          <!-- 资源 -->
          <el-carousel-item>
            <el-card shadow="hover" body-style="" class="card">
              <div class="el-row">
                <div class="el-col-16">
                  <img
                    class="card-image"
                    src="../../assets/card6.png"
                    alt="hi"
                  />
                </div>
                <div class="el-col-8 card-intro">
                  <div class="card-title">
                    资源
                    <router-link to="/resource">
                      <el-button color="#5194da" round plain class="btn"
                        >Explore</el-button
                      >
                    </router-link>
                  </div>
                  <div class="card-text">
                    在这里你可以找到你想要的软件安装包，附带安装教程，为你的学习之路添砖加瓦
                  </div>
                  <el-button
                    type="primary"
                    round
                    style="
                      width: 150px;
                      display: flex;
                      margin-left: 50%;
                      transform: translate(-50%, 50px);
                    "
                    @click="login"
                    >Login</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-carousel-item>
          <!-- 对话 GPT -->
          <el-carousel-item>
            <el-card shadow="hover" body-style="" class="card">
              <div class="el-row">
                <div class="el-col-16">
                  <img
                    class="card-image"
                    src="../../assets/card2.png"
                    alt="hi"
                  />
                </div>
                <div class="el-col-8 card-intro">
                  <div class="card-title">
                    对话
                    <router-link to="/login">
                      <el-button color="#5194da" round plain class="btn"
                        >Explore</el-button
                      >
                    </router-link>
                  </div>
                  <div class="card-text">
                    提供ChatGPT接口，通过Token或OpenAI
                    Api-Key访问，学习与工作的好帮手
                  </div>
                  <el-button
                    type="primary"
                    round
                    style="
                      width: 150px;
                      display: flex;
                      margin-left: 50%;
                      transform: translate(-50%, 50px);
                    "
                    @click="login"
                    >Login</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-carousel-item>
          <!-- 题库 -->
          <el-carousel-item>
            <el-card shadow="hover" body-style="" class="card">
              <div class="el-row">
                <div class="el-col-16">
                  <img
                    class="card-image"
                    src="../../assets/card3.png"
                    alt="hi"
                  />
                </div>
                <div class="el-col-8 card-intro">
                  <div class="card-title">
                    刷题
                    <router-link to="/subject">
                      <el-button color="#5194da" round plain class="btn"
                        >Explore</el-button
                      >
                    </router-link>
                  </div>
                  <div class="card-text">
                    速通高频面试题，记录回答音频，ChatGPT辅助解答，完善您的答案
                  </div>
                  <el-button
                    type="primary"
                    round
                    style="
                      width: 150px;
                      display: flex;
                      margin-left: 50%;
                      transform: translate(-50%, 50px);
                    "
                    >Login</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-carousel-item>
          <!-- 在线学习文档 -->
          <el-carousel-item>
            <el-card shadow="hover" body-style="" class="card">
              <div class="el-row">
                <div class="el-col-16">
                  <img
                    class="card-image"
                    src="../../assets/card5.png"
                    alt="hi"
                  />
                </div>
                <div class="el-col-8 card-intro">
                  <div class="card-title">
                    在线文档
                    <el-button
                      color="#5194da"
                      round
                      plain
                      class="btn"
                      @click="toMakedown"
                      >Explore</el-button
                    >
                  </div>
                  <div class="card-text">
                    通过在线学习文档，您可以自主安排学习进度，选择感兴趣的内容，并与他人互动交流。
                  </div>
                  <el-button
                    type="primary"
                    round
                    style="
                      width: 150px;
                      display: flex;
                      margin-left: 50%;
                      transform: translate(-50%, 50px);
                    "
                    >Login</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { onMounted } from "vue";
const $route = useRouter();

const login = () => {
  $route.push("/login");
};

const toMakedown = () => {
  window.open("http://8.134.121.53:5001/");
};
</script>

<style scoped lang="scss">
.guide {
  font-family: "Quicksand", sans-serif;
  // height: calc(100vh - 56px);
  height: 100vh;
  background-color: #bcd7f5;
  background-image: radial-gradient(
      closest-side,
      rgb(139, 211, 250, 1),
      rgba(254, 234, 131, 0)
    ),
    radial-gradient(closest-side, rgb(168, 207, 245, 1), rgba(51, 122, 190, 0)),
    radial-gradient(
      closest-side,
      rgba(178, 222, 158, 1),
      rgba(178, 222, 158, 0)
    ),
    radial-gradient(closest-side, rgba(41, 184, 165, 1), rgba(41, 184, 165, 0)),
    radial-gradient(
      closest-side,
      rgba(248, 192, 147, 1),
      rgba(248, 192, 147, 0)
    );
  background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax,
    110vmax 110vmax, 90vmax 90vmax;
  background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax,
    -30vmax -10vmax, 50vmax 50vmax;
  background-repeat: no-repeat;
  animation: 10s movement linear infinite;
  padding-left: 8%;
  padding-right: 8%;
  box-sizing: border-box;
  display: flex;
  .detail-wrapper {
    width: 100%;
    height: 70vh;
    margin-top: 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // info
    .detail-info {
      width: 32%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: rgba(246, 247, 248, 0.82);
      h1 {
        font-size: 60px;
      }
      h2 {
        font-size: 45px;
      }
    }
    // banner
    .detail-banner {
      width: 66%;
      height: 100%;
      .card {
        height: 70vh;
        background-color: rgba(255, 255, 255, 0.58);
        border: none;
        border-radius: 20px;
      }

      .card-image {
        height: 70vh;
      }

      .card-title {
        margin: 25vh 20px 10px 20px;
        color: rgba(75, 98, 147, 0.6);
        font-size: xx-large;
        font-weight: bold;
        display: flex;
        align-items: center;
        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 10px;
        }
      }

      .card-text {
        margin: 0 20px 10px 20px;
        color: rgba(75, 98, 147, 0.6);
        font-size: large;
        line-height: 1.5em;
      }
    }
  }
}

@keyframes movement {
  0%,
  100% {
    background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax,
      110vmax 110vmax, 90vmax 90vmax;
    background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax,
      -30vmax -10vmax, 50vmax 50vmax;
  }
  25% {
    background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax,
      90vmax 90vmax, 60vmax 60vmax;
    background-position: -60vmax -90vmax, 50vmax -40vmax, 0 -20vmax,
      -40vmax -20vmax, 40vmax 60vmax;
  }
  50% {
    background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax,
      60vmax 60vmax, 80vmax 80vmax;
    background-position: -50vmax -70vmax, 40vmax -30vmax, 10vmax 0,
      20vmax 10vmax, 30vmax 70vmax;
  }
  75% {
    background-size: 90vmax 90vmax, 90vmax 90vmax, 100vmax 100vmax,
      90vmax 90vmax, 70vmax 70vmax;
    background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0,
      -10vmax 10vmax, 40vmax 60vmax;
  }
}
</style>